<template>
  <div class="wrapper">
    <div class="tabLine">
      <el-radio-group v-model="type">
        <el-radio label="stat">安全内业资料管理统计</el-radio>
        <el-radio label="list">安全内业资料文件列表</el-radio>
      </el-radio-group>
    </div>
    <div v-if="type == 'stat'">
      <div class="titleLine ub">
        <div class="ub-f1">安全内业资料管理统计</div>
        <el-button type="primary" class="button" @click="openDirListDialog">目录设置</el-button>
      </div>
      <div class="body ub">
        <el-progress class="processCircle" :stroke-width="10" :width="180" type="circle"
          :percentage="totalPercent"></el-progress>
        <div class="ub-f1 ub ub-wrap">
          <div class="itemBorder" v-for="(item, index) in list" :key="index" @click="selectItem(item)">
            <div class="ub ub-ac ub-pj">
              <div class="str">{{ item.label }}</div>
              <div class="num">{{ item.percent * 100 }}%</div>
            </div>
            <el-progress class="itemProcess" :percentage="item.percent * 100" :show-text="false"></el-progress>
          </div>
        </div>
      </div>
      <template v-if="selectRow.id">
        <div>
          <div class="titleLine">安全内业资料完成详情</div>
          <div class="searchBorder">
            <el-input class="searchInput" size="small" v-model="filterText" placeholder="请输入目录名称" clearable></el-input>
          </div>
          <div class="body">
            <el-table class="dataTable" :data="filterList" :default-expand-all="true"
              :tree-props="{ children: 'children' }" row-key="id">
              <el-table-column :label="selectRow.label" align="left" prop="name" />
              <el-table-column :label="'已上传文件' + selectRow.uploadedFileCount + '个'" align="right">
                <template slot-scope="scope">
                  {{ scope.row.uploadedFileCount > 0 ? '已上传文件' + scope.row.uploadedFileCount + '个' : '未上传文件，请及时上传' }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </template>
    </div>
    <div v-else>
      <DetailList @refresh="getData" />
    </div>
    <DirListDialog :visible.sync="dirListDialogVisible" v-if="dirListDialogVisible" @refresh="getData">
    </DirListDialog>
  </div>
</template>
<script>
import DetailList from "./components/detailList.vue"
import DirListDialog from "./components/dirListDialog.vue"
import { statistic, firstLevel, performance } from "./api"
function cloneObj(obj) { return JSON.parse(JSON.stringify(obj)) }
export default {
  name: "SafeInfoDetail",
  components: { DetailList, DirListDialog },
  props: {
    info: {
      type: Object,
      default: () => { }
    }
  },
  computed: {
    projectId() {
      return this.$store.state.app.selectData
    }
  },
  data() {
    return {
      type: "stat",
      totalPercent: 0,
      filterText: "",
      list: [],
      selectRow: {},
      allDirList: [],
      detailList: [],
      filterList: [],
      dirListDialogVisible: false,
    }
  },
  watch: {
    filterText(val) {
      this.doFilterList();
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      const res = await statistic(this.projectId)
      if (res.data.needUploadCount == 0) {
        this.totalPercent
      } else {
        this.totalPercent = parseFloat((res.data.uploadedCount / res.data.needUploadCount).toFixed(2))
      }
      const res1 = await firstLevel(this.projectId)
      this.list = res1.data.map(item => ({
        label: item.safeInforName,
        percent: item.needUploadCount == 0 ? 0 : (parseFloat((item.uploadedCount / item.needUploadCount).toFixed(2))),
        id: item.safeInforId
      }))
      if (this.list.length) {
        this.selectRow = this.list[0]
      }
      const res2 = await performance(this.projectId)
      this.allDirList = this.handleTree(res2.data, "id", "parentId");
      this.doFilterList();
    },
    openDirListDialog() {
      this.dirListDialogVisible = true;
    },
    selectItem(item) {
      this.selectRow = item
      this.doFilterList();
    },
    handleTreeData(treeData, searchValue) {
      if (!treeData || treeData.length === 0) {
        return [];
      }
      const array = [];
      for (let i = 0; i < treeData.length; i += 1) {
        let match = false;
        for (let pro in treeData[i]) {
          if (pro == "name") {
            match |= treeData[i][pro].includes(searchValue);
            if (match) break;
          }
        }
        if (this.handleTreeData(treeData[i].children, searchValue).length > 0 || match) {
          array.push({
            ...treeData[i],
            children: this.handleTreeData(treeData[i].children, searchValue),
          });
        }
      }
      return array;
    },
    doFilterList() {
      const buffer = this.allDirList.find(item => item.id === this.selectRow.id)
      this.selectRow.uploadedFileCount = buffer.uploadedFileCount
      if (buffer && buffer.id) {
        const clone = cloneObj(buffer)
        let children = this.handleTreeData(clone.children, this.filterText)
        // this.filterList = [{ ...clone, children }]
        this.filterList = children;
        
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.wrapper {
  .titleLine {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 10px;

    .button {
      display: block;
    }
  }

  .processCircle {
    margin-left: 20px;
    margin-right: 20px;
  }

  .itemBorder {
    width: 30%;
    margin-right: 20px;
    margin-bottom: 10px;
    cursor: pointer;

    .itemProcess {
      margin-top: 10px;
    }
  }

  .searchInput {
    width: 300px
  }

  .dataTable {
    border: 1px solid #e0e0e0;
    border-bottom: 0px;
    margin-top: 10px;
  }
}
</style>